<template>
  <el-table :data="change_editAble">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column label="分类名称">
        <template v-slot="{row}">
            <el-input v-model="row.cateName" v-if="row.editAble"></el-input>
            <span v-else>{{row.cateName}}</span>
        </template>
    </el-table-column>
    <el-table-column label="是否启用">
      <template v-slot="{row}">
        <el-switch
          v-model="row.state"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          :disabled="!row.editAble"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="{row}">
        <el-button type="success" v-if="row.editAble" @click="sendEdit(row)">完成</el-button>
        <el-button @click="edit(row)" type="primary" v-else>编辑</el-button>
        <el-button @click="del(row)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("category", ["categoryList"]),
    ...mapGetters("category", ["change_editAble"]),
  },
  methods: {
    ...mapActions("category", ["sync_update_categoryList",'sync_del_category','sync_editcate']),
    edit(row) {
      row.editAble = true;
    },
    del(row){
      this.sync_del_category(row.id)
    },
    sendEdit(row){
      this.sync_editcate(row)
      row.editAble = false;
    }
  },
  created() {
    this.sync_update_categoryList();
  }
};
</script>

<style scoped>
</style>